<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../../pqgrid/pqgrid.min.css" />
    <script src="../../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../../pqgrid/themes/office/pqgrid.css" />

<script>
    

    $(function () {
        //define common toolbar for both grids.
        var toolbar = { items: [
                { type: 'button', label: 'Copy', listener: { click: function (evt) {
                    var $grid = $(this).closest(".pq-grid");
                    $grid.pqGrid("copy");
                }
                }
                },
                { type: 'button', label: 'Paste', listener: { click: function (evt) {
                    var $grid = $(this).closest(".pq-grid");
                    $grid.pqGrid("paste");
                }
                }
                }
            ]
        };
        //define data for first grid.
        var data = [
            { rank: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
            { rank: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
            { rank: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
            { rank: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
            { rank: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
            { rank: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
            { rank: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3' },
            { rank: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
            { rank: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
            { rank: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
            { rank: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
            { rank: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
            { rank: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
            { rank: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
            { rank: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5' },
            { rank: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
            { rank: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
            { rank: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
            { rank: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
            { rank: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
        ];

        function formatCurrency(ui) {
            var cellData = ui.cellData;
            if (cellData == null) {
                return "";
            }
            else {
                return ((cellData < 0) ? "-" : "") + "$" + $.paramquery.formatCurrency(cellData);
            }
        }        
        var colModel = [
            { title: "Rank", dataType: "integer", dataIndx: "rank", width: 10, minWidth: 10 },
            { title: "Company", dataType: "string", dataIndx: "company" },
            { title: "Revenues ($ millions)", dataType: "float", align: "right", dataIndx: "revenues", render: formatCurrency },
            { title: "Profits ($ millions)", dataType: "float", align: "right", dataIndx: "profits", render: formatCurrency }
        ];
        //create first grid.
        $("#grid_json_copy").pqGrid({
            colModel: colModel,
            dataModel: {data: data},
            width: '48%-2',
            title: "Grid A",
            toolbar: toolbar,
            resizable: true,
            showBottom: false,
            editModel:{clicksToEdit: 2},
            numberCell: { show: false },
            scrollModel: { autoFit: true }
        });
        //create 2nd grid.
        $("#grid_json_paste").pqGrid({
            colModel: $.extend(true, [], colModel),
            width: '48%-2',
            title: "Grid B",
            toolbar: toolbar,
            resizable: true,
            showBottom: false,
            editModel: { clicksToEdit: 2 },
            numberCell: { show: false },
            scrollModel: { autoFit: true }
        });
    });    
    
        
</script>    
</head>
<body>

<p>
Copy paste functionality of ParamQuery is compatible with MS Excel i.e., data can be copied from ParamQuery Grid and pasted to MS Excel and vice versa. Use Command key instead of Ctrl key on Mac for copy paste operations. 
Ctrl A: Select All cells. 
Ctrl C: Copy selection from ParamQuery Grid or MS Excel spreadsheet. 
Ctrl V: Paste data to ParamQuery Grid or MS Excel spreadsheet. 
Ctrl Z: Undo 
Ctrl Y: Redo
</p>

<div id="grid_json_copy" style="float:left;"></div>

<div style="float:left;width:4%;">&nbsp;</div>

<div id="grid_json_paste" style="float:left;"></div>

<div style="clear:both;"></div>

</body>

</html>
